<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tracker</title>
  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
  <link rel="stylesheet" href="test3.css">
  <script src="utils.js"></script>
  <script src="intent.js"></script>
  <script src="visualizer.js"></script>
  <script>
    function $(id) {
      return document.getElementById(id);
    }
  </script>
</head>

<body id="body">
  <article id="analysis-young" class="analysis-young">
    <article id="hint-young" class="hint-young">
      <label id="event-young">VM Init</label>
      <label id="info-young">Java virtual machine finish to init</label>
    </article>
    <div class="eden">
      <label>Eden</label>
      <label id="size-eden" class="size-young">Size: 0/0 Bytes</label>
      <label id="jvm-size-eden" class="jvm-size-young">JVM created objects: 0 Bytes</label>
      <section id="eden-container">
        <!-- Objects -->
      </section>
    </div>
    <div class="s1">
      <label>S1</label>
      <label id="size-s1" class="size-young">Size: 0/0 Bytes</label>
      <label id="jvm-size-s1" class="jvm-size-young">JVM created objects: 0 Bytes</label>
      <section id="s1-container">
        <!-- Objects -->
      </section>
    </div>
    <div class="s2">
      <label>S2</label>
      <label id="size-s2" class="size-young">Size: 0/0 Bytes</label>
      <label id="jvm-size-s2" class="jvm-size-young">Together with Eden as allocation space</label>
      <section id="s2-container">
        <!-- Objects -->
      </section>
    </div>
    <div class="old">
      <label>Old</label>
      <label id="size-old" class="size-young">Size: 0/0 Bytes</label>
      <label id="jvm-size-old" class="jvm-size-young">JVM created objects: 0 Bytes</label>
      <section id="old-container">
        <!-- Objects -->
      </section>
    </div>
    <aside id="aside-young">
      <label id="start-young" class="start-young">NEXT</label>
      <label id="reset-young" class="reset-young">RESET</label>
      <label id="back-young" class="back-young">BACK</label>
    </aside>
  </article>
  <div id="main-container">
    <!-- header -->
    <header class="navigation">
      <a for="" href="test2-2.html">First</a>
      <a for="">Second</a>
      <a for="">Third</a>
      <a for="">Fourth</a>
      <a for="">Fifth</a>
      <a for="">Sixth</a>
      <a for="">Seventh</a>
      <a for="">Eighth</a>
      <a for="">Ninth</a>
      <a for="">Tenth</a>
    </header>
    <!-- 标题 -->
    <header id="title" class="title">TRACKER</header>
    <!-- 主要内容 -->
    <main id="main">
      <!-- Code -->
      <article class="code-article">
        <header>Code Here</header>
        <div>
          <textarea id="code-text" spellcheck="false">
public class Code {
    public static void main(String[] args) {
        System.out.println("Input your codes here!");
    }
}</textarea>
        </div>
        <footer>
          <button id="submit">Submit</button>
          <button id="analyse">Analyse</button>
        </footer>
      </article>
      <!-- Analysis -->
      <article class="analysis-article">
        <header>Analysis</header>
        <!-- 一层蒙板 -->
        <div class="cover">
          <!-- 一个盒子 -->
          <div id="pageContainer" class="page-container">
            <section>Static</section>
            <section>
              <label>Young</label>
              <label>Young generation consists of one Eden region and two Survivor regions. Most of the objects will be
                created in the young generation.</label>
              <button id="young-detail">►</button>
            </section>
            <section>Old</section>
            <section>Other</section>
          </div>
        </div>
        <!-- 左右按钮 -->
        <footer>
          <button id="left">◄</button>
          <button id="right">►</button>
        </footer>
      </article>
    </main>
    <!-- footer -->
    <footer class="copyright">Tracker | Chase Alex AX AM</footer>
  </div>

  <script src="test3.js"></script>
</body>

</html>